<template>
  <block>
    <view class="mcar-bg">
      <image src="./images/bg.png" mode="scaleToFill" />
    </view>
    <view class="mcar-info">
      <view class="mcar-info-img">
        <image :src="info.head_url" mode="scaleToFill" />
      </view>
      <view class="mcar-info-own">
        <text class="mown-title">{{ info.name }}</text>
        <text class="mown-vip" v-if="isVip"></text>
        <van-button
          v-if="!info.is_follow"
          icon="plus"
          plain="true"
          type="info"
          color="#006CFF"
          size="mini"
          @tap="follow"
        >
          关注
        </van-button>
        <van-button
          type="info"
          color="#999"
          size="mini"
          :disabled="true"
          @tap="unfollow"
          v-else
        >
          取消关注
        </van-button>
      </view>
      <view class="mcar-info-own">
        <view class="mcar-info-view">
          <view class="mcar-title">公司名称：</view>
          <view class="mcar-vip">{{ info.car_shop_name }}</view>
        </view>
        <view class="mcar-info-view">
          <view class="mcar-title">经营地区：</view>
          <view class="mcar-vip">{{ info.address }}</view>
        </view>
        <view class="mcar-info-view">
          <view class="mcar-title">联系方式：</view>
          <view class="mcar-vip">{{ info.mobile }}</view>
        </view>
      </view>
    </view>
  </block>
</template>

<script>
import { toast } from '@utils/index'
import { follow, unfollow } from '@requests/circle'
export default {
  name: 'CircleInfo',
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      followed: false
    }
  },
  created() {
    //this.followed = this.info.is_follow
    console.log(this.info)
  },
  computed: {
    isVip() {
      return this.info.vip_leve !== 0 ? true : false
    }
  },
  methods: {
    follow() {
      follow(this.id).then(res => {
        this.info.is_follow = true
        toast.success('关注成功')
      })
    },
    unfollow() {
      unfollow(this.id).then(res => {
        this.info.is_follow = false
        toast.success('取消关注成功')
      })
    }
  }
}
</script>

<style>
.mcar-bg {
  width: 100%;
}
.mcar-bg image {
  width: 100%;
}
.mcar-info {
  padding: 0 0.8rem 0.8rem;
  margin: -60rpx 0 0;
}
.mcar-info .mcar-info-img {
  width: 120rpx;
  height: 120rpx;
}
.mcar-info .mcar-info-img image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4rpx solid #fff;
}
.mcar-info .mcar-info-own {
  margin-top: 0.8rem;
}
.mcar-info-own .mown-title {
  font-size: 1.2rem;
  font-weight: bold;
  float: left;
  margin-right: 0.3rem;
}
.mcar-info-own .mcar-title,
.mcar-info-own .mcar-vip {
  display: inline-block;
  font-size: 0.965rem;
}
.mcar-info-own .mcar-info-view {
  padding: 0.2rem 0;
}
.mown-vip {
  display: inline-block;
  width: 90px;
  height: 36px;
  background: url('https://yiche-static.oss-cn-hangzhou.aliyuncs.com/ycsk/vip_img.png')
    bottom center no-repeat;
  background-size: cover;
  vertical-align: middle;
}
</style>
